<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="/assets/js/config.js"></script>
    <link rel="stylesheet" type="text/css" href="css/apply.css"/>

    <script type="text/javascript" src="js/design.js"></script>
    <script type="text/javascript" src="js/multiSelect.js"></script>
</head>

<body>
<button onclick="printPage()" style="float: right;" id="button">打印</button>
<form id="fm">
    <h2 align=" center" id="title">出差申请</h2>
    <p>申请日期： <span id="crtDate"></span></p>
    <table border="1" style="border-collapse: collapse;width: 100%">
        <tr>
            <td>申请人</td>
            <td><input name="userName" class="layui-input" readonly></td>
            <td>申请单位</td>
            <td><input class="layui-input" name="department" readonly></td>
        </tr>
        <tr>
            <td>出差路线</td>
            <td colspan="5">从<input class="layui-input" name="fromPlace" style="display: inline-block;width: 30%">到
                <input class="layui-input" name="toPlace" style="display: inline-block;width: 30%"></td>
        </tr>
        <tr>
            <td>出差日期</td>
            <td colspan="5">从<input class="layui-input" name="leaveDate" style="display: inline-block;width: 30%">到
                <input class="layui-input" name="backDate" style="display: inline-block;width: 30%"></td>
        </tr>
        <tr>
            <td>出差人员</td>
            <td colspan="5"><input class="layui-input" name="userList" placeholder="多人以“，”分隔"></td>
        </tr>
        <tr>
            <td>交通工具</td>
            <td colspan="5">
                <span>
                    <input id="radio0" type="radio" name="tool" value="0" checked>&nbsp;<label>自行解决</label>&nbsp;&nbsp;&nbsp;&nbsp;
                    <input id="radio1" type="radio" name="tool" value="1">&nbsp;<label>市内用车</label>&nbsp;&nbsp;&nbsp;&nbsp;
                    <input id="radio2" type="radio" name="tool" value="2">&nbsp;<label>市外用车</label>
                </span>
                <span id="tips" style="display: none;color: red">(市外用车需要添加派车执行人)</span>

            </td>
        </tr>
        <tr>
            <td>出差事由</td>
            <td colspan="5"><textarea class="layui-textarea" name="reason"></textarea></td>
        </tr>
    </table>
    <br>
</form>
</body>
<script>
    $(function () {
        var id = getUrlParam();
        if (id) {
            drawApprove(id);
            $("input").prop('readonly', true);
            $("#app").hide();
            $(".layui-layer-btn").hide();
            $.post('/office/flowStepInstance/queryDetail', {id: id}, function (res) {
                if (res.code == 200) {
                    var data = res.obj;
                    $("#crtDate").text(formatDate(new Date(data.crtDate)));
                    drawForm(data, $("#fm"));
                    //特殊处理
                    $("#radio" + data.tool).attr("checked", "checked");
                }
            });
        } else {
            drawAdd();
            //新增流程，申请日期为今天
            var today = formatDate(new Date())
            $("#crtDate").text(today);
            $("[name='userName']").val(getUserName());
            $("[name='department']").val(getOrgName());
            //渲染流程模板
            $.post('/office/flowStepTemplate/getTemplateStep', {userId: getUserId(), templateId: 1}, function (res) {
                if (res.code == 200) {
                    if (res.obj) {
                        drawFlowStep(res.obj.flowNodes);
                        if(makeFlag==1||makeFlag==2){
                            removeStep()
                        }
                    }
                }
            });
        }

        $("[name=\"tool\"]").click(function () {
            var val = $(this).val()
            if (val == 2) {
                $("#tips").show();
                addExecute();
                $.get('/office/role/queryUserListByRole',{roleId:'33'},function(res) {
                    if(res.code==200&&res.obj.length > 0) {
                        var id= res.obj[0].id
                        wrapFuzzSelect(flowStepList.length, [res.obj[0].id]);
                        flowStepList[flowStepList.length-1] = {"orgId": id}
                    }else{
                        showAlert('查询执行人失败')
                    }
                })
            } else {
                $("#tips").hide()
                if(makeFlag==1||makeFlag==2){
                    removeStep()
                }
            }
        })
    });

    function submitForm() {
        var param = getSubmitParam();
        if (!validateCommonForm()) {
            showAlert("请补全表单详情后提交哦");
            return false;
        }
        layer.confirm('确认提交', function (index) {
            param.userId = localStorage.getItem("userId");
            param.title = $("#title").text();
            param.tool = $("input[name='tool']:checked").val();
            param.title = $("#title").text();
            doSubmit('/office/flowWork/addFlowTravel', param)
        })
    }
    function printPage() {
        window.print();
    }

    var beforePrint = function () {
        $("#button").hide();
        $("#notice").hide();

    };

    var afterPrint = function () {
        $("#button").show();
        $("#notice").show();
    };

    if (window.matchMedia) {   //返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function (mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;

</script>
</html>
